<template>
  <div class="mobile-scheme-advantage">
    <Title
      v-slide-up
      title="方案优势"
      color="#0e0b31"
      size="16"
      bold="700"
      sub-title="Program Advantages"
      sub-color="#878597"
      sub-size="14"
      left="27"
      block="#4580dd"
      block-width="2"
      block-pos="center"
    />
    <div class="g-box">
      <div v-slide-plus v-for="(i, k) in data.list" :key="k" class="g-item f f-ac">
        <img v-slide-plus :src="publicSrc(i.image)" />
        <Title
          v-slide-up
          :title="i.name"
          color="#0e0b31"
          size="14"
          bold="700"
          line="1"
          :sub-title="i.introduce"
          sub-color="#383838"
          sub-size="14"
          gap="10"
          :line-height="20"
          sub-line="2"
          left="0"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        list: [],
      };
    },
  },
});
</script>
<style lang="scss" scoped>
.mobile-scheme-advantage {
  width: 100%;
  background-color: #fff;
  padding: 1.25rem;
  box-sizing: border-box;
  .g-box {
    .g-item {
      height: 6.875rem;
      background: #fff;
      border: 1px solid #e5e5e5;
      padding: 0 1.25rem 0 2.1875rem;
      transition: all 0.3s;
      margin-top: 1.25rem;
      img {
        width: 2.375rem;
        height: 2.375rem;
        margin: 1.25rem 2.1875rem 1.25rem 0;
      }
      &:active {
        background: linear-gradient(135deg, #fff 0%, #2a82e4 100%);
        // box-shadow: 0 0.625rem 0.9375rem rgba(42, 130, 228, 0.25);
        // animation: toRight 0.3s ease;
      }
    }
  }
}
</style>
